@import (multiple) '../../less/colors-ios.less';

.list {
  .accordion-item-toggle {
    .item-inner {
      background-size: 8px 13px;

      .ltr( {
          background                                                                    : no-repeat calc(~"100% - 15px") center;
          .svg-background("<svg width='8px' height='13px' viewBox='0 0 8 13' xmlns='http://www.w3.org/2000/svg'><polygon fill='#c7c7cc' transform='translate(1.500000, 6.500000) rotate(-45.000000) translate(-1.500000, -6.500000) ' points='6 11 6 2 4 2 4 9 -3 9 -3 11 5 11'></polygon></svg>");
          padding-right                                                                 : 35px;
        }

      );

      .rtl( {
          padding-left                                                                  : 35px;
          background-repeat                                                             : no-repeat;
          background-position                                                           : 15px center;
          .svg-background("<svg width='8px' height='13px' viewBox='0 0 8 13' xmlns='http://www.w3.org/2000/svg'><polygon fill='#c7c7cc' transform='translate(6.500000, 6.500000) rotate(-225.000000) translate(-6.500000, -6.500000) ' points='11 11 11 2 9 2 9 9 2 9 2 11 10 11'></polygon></svg>");
        }

      );
    }

    &.active-state {
      background-color: #d9d9d9;
    }
  }
}

.list:not(.media-list) .accordion-item-opened:not(.media-item) .accordion-item-toggle .item-inner,
.list:not(.media-list) .accordion-item-opened:not(.media-item)>.item-link .item-inner,
.media-list .accordion-item-opened .accordion-item-toggle .item-title-row,
.media-list .accordion-item-opened>.item-link .item-title-row,
.accordion-item-opened.media-item .accordion-item-toggle .item-title-row,
.accordion-item-opened.media-item>.item-link .item-title-row,
.links-list .accordion-item-opened>a {
  .svg-background("<svg width='13px' height='8px' viewBox='0 0 8 13' xmlns='http://www.w3.org/2000/svg'><polygon fill='#c7c7cc' transform='translate(6.5, 6.5) rotate(-315) translate(-10, -6.5)' points='11 11 11 2 9 2 9 9 2 9 2 11 10 11'></polygon></svg>");
  background-size                                                               : 13px 13px;
}

// Dark theme
& when (@includeDarkTheme) {
  .theme-dark {
    .list {
      .accordion-item-toggle {
        .item-inner {
          .ltr( {
              .svg-background("<svg width='8px' height='13px' viewBox='0 0 8 13' xmlns='http://www.w3.org/2000/svg'><polygon fill='#434345' transform='translate(1.500000, 6.500000) rotate(-45.000000) translate(-1.500000, -6.500000) ' points='6 11 6 2 4 2 4 9 -3 9 -3 11 5 11'></polygon></svg>");
            }

          );

          .rtl( {
              .svg-background("<svg width='8px' height='13px' viewBox='0 0 8 13' xmlns='http://www.w3.org/2000/svg'><polygon fill='#434345' transform='translate(6.500000, 6.500000) rotate(-225.000000) translate(-6.500000, -6.500000) ' points='11 11 11 2 9 2 9 9 2 9 2 11 10 11'></polygon></svg>");
            }

          );
        }

        &.active-state {
          background-color: #363636;
        }
      }
    }

    .list:not(.media-list) .accordion-item-opened:not(.media-item) .accordion-item-toggle .item-inner,
    .list:not(.media-list) .accordion-item-opened:not(.media-item)>.item-link .item-inner,
    .media-list .accordion-item-opened .accordion-item-toggle .item-title-row,
    .media-list .accordion-item-opened>.item-link .item-title-row,
    .accordion-item-opened.media-item .accordion-item-toggle .item-title-row,
    .accordion-item-opened.media-item>.item-link .item-title-row,
    .links-list .accordion-item-opened>a {
      .svg-background("<svg width='13px' height='8px' viewBox='0 0 8 13' xmlns='http://www.w3.org/2000/svg'><polygon fill='#434345' transform='translate(6.5, 6.5) rotate(-315) translate(-10, -6.5)' points='11 11 11 2 9 2 9 9 2 9 2 11 10 11'></polygon></svg>");
    }
  }
}